import classnames from 'classnames'
import Icon from '@/components/Icon'
import styles from './index.module.scss'
import { useDispatch, useSelector } from 'react-redux'
import { RootState } from '@/types/store'
import { addChannel, changeActive, deleteChannel } from '@/store/actions/home'
import React, { useState } from 'react'
import { Toast } from 'antd-mobile'
import { Channel } from '@/types/data'
type Props = {
  hide: () => void
}
const Channels = ({ hide }: Props) => {
  const { userChannels, allChannels, active } = useSelector(
    (state: RootState) => state.channel
  )
  const dispatch = useDispatch()
  const recomand = allChannels.filter((item: Channel) => {
    return !userChannels.some((a: Channel) => item.id === a.id)
  })
  const [isEdit, setIsEdit] = useState(false)
  return (
    <div className={styles.root}>
      <div className="channel-header">
        <Icon type="iconbtn_channel_close" onClick={hide}></Icon>
      </div>
      <div className="channel-content">
        <div className={classnames('channel-item', { edit: isEdit })}>
          <div className="channel-item-header">
            <span className="channel-item-title">我的频道</span>
            <span className="channel-item-title-extra">
              {isEdit ? '点击删除频道' : '点击进入频道'}
            </span>
            <span
              className="channel-item-edit"
              onClick={() => setIsEdit(!isEdit)}
            >
              {isEdit ? '完成' : '编辑'}
            </span>
          </div>
          <div className="channel-list">
            {userChannels.map((item, index) => {
              return (
                <span
                  className={classnames('channel-list-item', {
                    selected: item.id === active,
                  })}
                  key={item.id}
                  onClick={() => {
                    dispatch(changeActive(item.id))
                    hide()
                  }}
                >
                  {item.name}
                  {index !== 0 && (
                    <Icon
                      type="iconbtn_tag_close"
                      onClick={() => {
                        if (userChannels.length <= 3) {
                          return Toast.show({
                            content: '至少保留3个频道',
                          })
                        }
                        dispatch(deleteChannel(item))
                        if (item.id === active) {
                          dispatch(changeActive(userChannels[0].id))
                        }
                      }}
                    />
                  )}
                </span>
              )
            })}
          </div>
        </div>

        <div className="channel-item">
          <div className="channel-item-header">
            <span className="channel-item-title">频道推荐</span>
            <span className="channel-item-title-extra">点击添加频道</span>
          </div>
          <div className="channel-list">
            {recomand.map((item) => {
              return (
                <span
                  className="channel-list-item"
                  key={item.id}
                  onClick={() =>
                    dispatch(addChannel({ id: item.id, name: item.name }))
                  }
                >
                  {item.name}
                </span>
              )
            })}
          </div>
        </div>
      </div>
    </div>
  )
}

export default Channels
